<template>
  <div class="dashboard-container">
    <el-card shadow="hover" class="welcome-card">
      <div slot="header" class="clearfix">
        <h1 class="dashboard-title">养老院管理系统</h1>
      </div>
      <div class="dashboard-content">
        <div class="dashboard-text">欢迎使用养老院管理系统</div>
        <div class="dashboard-description">
          本系统提供老人管理、员工管理、房间管理、服务记录等功能，请点击下方卡片快速访问各模块
        </div>

        <el-row :gutter="20" class="nav-cards">
          <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="item in navItems" :key="item.path">
            <el-card
              shadow="hover"
              class="nav-card"
              @click.native="handleNavClick(item.path)"
            >
              <div class="nav-card-content">
                <i :class="['nav-icon', item.icon]"></i>
                <h3>{{ item.title }}</h3>
                <p>{{ item.description }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      navItems: [
        {
          title: '老人管理',
          path: '/elder/list',
          icon: 'el-icon-user-solid',
          description: '管理老人信息、健康状况等'
        },
        {
          title: '员工管理',
          path: '/employee/list',
          icon: 'el-icon-user',
          description: '管理员工信息、排班等'
        },
        {
          title: '房间管理',
          path: '/room/list',
          icon: 'el-icon-house',
          description: '管理房间分配、设施维护等'
        },
        {
          title: '服务记录',
          path: '/serviceRecord/list',
          icon: 'el-icon-document',
          description: '记录老人服务、护理情况'
        },
        {
          title: 'AI智能助手',
          path: '/demo',
          icon: 'el-icon-chat-dot-round',
          description: '进行简单的AI对话'
        }
      ]
    }
  },
  methods: {
    handleNavClick(path) {
      this.$router.push(path)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  height: 100%;

  .welcome-card {
    min-height: calc(100vh - 120px);
    border-radius: 8px;

    .dashboard-title {
      color: #409EFF;
      text-align: center;
      margin: 0;
      font-size: 28px;
    }
  }

  .dashboard-content {
    padding: 20px;

    .dashboard-text {
      font-size: 22px;
      line-height: 40px;
      text-align: center;
      color: #666;
      margin-bottom: 10px;
    }

    .dashboard-description {
      font-size: 16px;
      color: #888;
      text-align: center;
      margin-bottom: 40px;
    }

    .nav-cards {
      margin-top: 30px;

      .nav-card {
        margin-bottom: 20px;
        cursor: pointer;
        transition: all 0.3s;
        border-radius: 8px;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.1);
        }

        .nav-card-content {
          text-align: center;
          padding: 15px 0;

          .nav-icon {
            font-size: 36px;
            color: #409EFF;
            margin-bottom: 15px;
            display: block;
          }

          h3 {
            margin: 0 0 10px;
            color: #333;
          }

          p {
            margin: 0;
            color: #999;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
